<template>
    <div id="box" class="user_info bgfff full flex-row">
        <header id="head" class="fff">
            <div id="bar"></div>
            <ul class="flex-col">
                <li class="head-l">
                    <i>XX</i>
                </li>
                <li class="box1 head-c"></li>
                <li class="head-r flex-col flex-middle"></li>
            </ul>
        </header>
        <main>
            <div class="head"></div>
            <ul class="info">
                <li>张三</li>
                <li>1997-4-12</li>
                <li>世界那么大，我想去看看</li>
            </ul>
            <div class="sex text-c ">
                <div class="active">男生</div>
                <span class="c82 font-16">or</span>
                <div class="">女生</div>
            </div>
        </main>
        <footer class="box-center">
            <div class="cfff box-center bgmain">保存</div>
        </footer>
    </div>
</template>

<script>
export default {
  name: "user_info"
};
</script>

<style scoped lang="scss">
    @import '../../css/rem.scss';
   .user_info{
       main{
           .head{
               height: p2r(200px);
               background: #ccc;
           }
           .info{
               li{
                   height: p2r(52px);
                   display: flex;
                   justify-content: center;
                   align-items: flex-end;
                   padding-bottom: p2r(2px);
                   border-bottom: 1px solid #eee;
               }
           }
           .sex{
               padding: p2r(40px) 0 p2r(50px);
               align-items: baseline;
               div{
                   display: inline-block;
                   width: 30%;
                   height: p2r(36px);
                   line-height: p2r(36px);
                   border-radius: p2r(36px);
                   border: 1px solid #eee;
                   margin: 0 p2r(16px);
                   &.active{
                       background: #0082fc;
                       color:#fff;
                   }
               }
           }
       }
       footer{
            div{
                width: 80%;
                height: p2r(40px);
                border-radius: p2r(40px);
            
            }
       }
   }
</style>